<template>
  <view>
    <uni-card class="card" is-shadow="true">
      <!-- 上层 -->
      <view class="top">
        <!-- 左侧图片 -->
        <view class="top-img">
          <image class="img" :src="list.image_src"></image>
        </view>
        <!-- 右侧文字 -->
        <view class="content">
          <!-- 标题 -->
          <view class="title1">{{list.title1}}</view>
          <view class="title2">{{list.title2}}</view>
          <view class="br"></view>
          <view class="title">{{list.title}}</view>
          <view class="text">{{list.text}}</view>
          <p class="p">{{string}}</p>
          <!-- 价格 -->
          <view class="price">￥{{list.price}} <span>{{list.pricebefore}}</span></view>
        </view>
      </view>

      <!-- 下层 -->
      <view class="buttom">
        <!-- 进度条 -->
        <view class="progress-box">
          <view class="txt">抢购进度{{percents}}%</view>
          <progress :percent="percents" active="true" activeColor="#EAAA6E" backgroundColor="#F9F9F9" border-radius="50"
            :show-info="false" stroke-width="20" />
        </view>
        <!-- 点击购买 -->
        <view class="button">
          <button size="mini">立即购买</button>
        </view>
      </view>
    </uni-card>

  </view>
</template>

<script>
  import pinyin from '@/node_modules/js-pinyin/index'
  export default {
    props: {
      list: {
        type: Object,
        default: {}
      }
    },
    name: "my-list",
    created() {
    },
    data() {
      return {
      };
    },
    computed: {
      percents() {
        let num = (this.list.shou / this.list.cun) * 100
        return num
      },
      string() {
        var name = this.list.text
        var reg = /[\u4e00-\u9fa5]/g;
        var names = name.match(reg);
        name = names.join("");
        return pinyin.getFullChars(name)
      }
    }
  }
</script>

<style lang="scss">
  .card {
    display: flex;
    flex-direction: column;

    .top {
      display: flex;

      .top-img {
        margin-right: 16rpx;

        .img {
          width: 300rpx;
          height: 300rpx;
        }
      }

      .content {

        .title1,
        .title2 {
          color: #383838;
          font-weight: 400;
          font-family: STHeiti;
        }

        .br {
          width: 100%;
          height: 1rpx;
          background-color: #DCDCDC;
          margin-bottom: 12rpx;
        }

        .title {
          color: #323232;
          font-weight: 700;
          margin-bottom: 16rpx;
        }

        .text {
          color: #3A3A3A;
          font-weight: 400;
          font-size: 26rpx;
        }

        .p {
          color: #676767;
          font-weight: 400;
          font-size: 16rpx;
        }

        .price {
          margin-top: 36rpx;
          color: #F27050;
          font-size: 42rpx;

          span {
            margin-left: 20rpx;
            font-size: 28rpx;
            color: #C6C6C6;
            text-decoration: line-through;
          }
        }

      }
    }

    .buttom {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .progress-box {
        position: relative;
        width: 63%;

        .txt {
          position: absolute;
          color: #656565;
          font-size: 24rpx;
          margin-left: 32rpx;
          margin-top: 4rpx;
        }

      }

      .button {

        button {
          background-color: #FC7A59;
          color: #FFFFFF;
          border-radius: 100rpx;
        }

      }

    }
  }
</style>
